<template>
  <component
    class="w-icon"
    :is="tag || 'i'"
    :class="classes"
    v-on="$attrs"
    role="icon"
    aria-hidden="true"
    :style="styles"
  >
    <template v-if="ligature">{{ ligature.iconName }}</template>
  </component>
</template>

<script>
  import config from "../../utils/config";
  import { ref, computed, onMounted, onBeforeUpdate } from "vue";
  export default {
    name: "w-icon",

    props: {
      tag: { type: String, default: "i" },
      color: { type: String },
      bgColor: { type: String },
      xs: { type: Boolean },
      sm: { type: Boolean },
      md: { type: Boolean },
      lg: { type: Boolean },
      xl: { type: Boolean },
      spin: { type: Boolean },
      rotate135a: { type: Boolean },
      rotate90a: { type: Boolean },
      rotate45a: { type: Boolean },
      rotate45: { type: Boolean },
      rotate90: { type: Boolean },
      rotate135: { type: Boolean },
      rotate180: { type: Boolean },
      flipX: { type: Boolean },
      flipY: { type: Boolean },
      size: { type: [Number, String] },
    },

    emits: [],

    setup(props, { slots }) {
      const icon = ref("");
      // created
      icon.value = (slots.default && slots.default()[0].children) || "";
      onBeforeUpdate(() => {
        icon.value = slots.default && slots.default()[0].children;
      });
      const ligature = computed(() => {
        if (!config.iconsLigature) {
          return false;
        }
        const [fontName, iconName] = icon.value.split(" ");
        return fontName === config.iconsLigature && { fontName, iconName };
      });
      const forcedSize = computed(() => {
        return (
          props.size && (!isNaN(props.size) ? `${props.size}px` : props.size)
        );
      });
      const presetSize = computed(() => {
        return (
          (props.xs && "xs") ||
          (props.sm && "sm") ||
          (props.md && "md") ||
          (props.lg && "lg") ||
          (props.xl && "xl") ||
          null
        );
      });
      const classes = computed(() => {
        return {
          [icon.value]: true,
          [props.color]: props.color,
          [`${props.bgColor}--bg`]: props.bgColor,
          [`size--${presetSize.value}`]: presetSize.value && !forcedSize.value,
          "w-icon--spin": props.spin,
          "w-icon--rotate45": props.rotate45,
          "w-icon--rotate90": props.rotate90,
          "w-icon--rotate135": props.rotate135,
          "w-icon--rotate180": props.rotate180,
          "w-icon--rotate-45": props.rotate45a,
          "w-icon--rotate-90": props.rotate90a,
          "w-icon--rotate-135": props.rotate135a,
          "w-icon--flip-x": props.flipX,
          "w-icon--flip-y": props.flipY,
          [ligature.value && ligature.value.fontName]: ligature.value,
        };
      });
      const styles = computed(() => {
        return forcedSize.value && `font-size: ${forcedSize.value}`;
      });
      return {
        icon,
        // computed
        ligature,
        forcedSize,
        presetSize,
        classes,
        styles,
      };
    },
  };
</script>
